<template>
	<view>
		<view class="acea-row row-middle nav-bg">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
				:scroll-left="tabLeft" show-scrollbar="true">
				<view class="item" :style='"width:"+isWidth+"px"' :data-index="index"
					:class="[index==categoryType?'item-on':'',index>4?'item-mr-l':'',]"
					v-for="(item,index) in categoryList" :key="index" :id="'id'+index"
					@click="categoryNavClick(item,index)">
					<view class="acea-row row-middle row-center img">
						<image :src="item.icon" mode="widthFix"  :class="(categoryOn == 6 || categoryOn == 5?'image2':'image')"
							:style="categoryOn==5 || categoryOn == 6 ? {width:'45rpx',height:'45rpx'} :''"></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<!-- <view class="acea-row row-column row-center-wrapper item" :class="index===categoryOn?'item-on':''" v-for="(item,index) in categoryList" :key="index" @click="categoryNavClick(item,index)">
				<view class="acea-row row-middle row-center img">
					<image :src="'../static/images/' + item.image" mode=""></image>
				</view>	  
				<view class="name">
					{{item.name}}
				</view>
			</view> -->
		</view>
		<view class="acea-row row-middle type-bg" v-if="categoryOn==6 || categoryOn==5">
			<view class="type" :class="typeOn==index?'type-on':''" v-for="(item,index) in typesP" :key="index"
				@click="typeNavClick(item,index)">
				{{item.name}}
			</view>
		</view>
		<view class="acea-row row-middle type-bg" v-else>
			<view class="type" :class="typeOn==index?'type-on':''" v-for="(item,index) in types" :key="index"
				@click="typeNavClick(item,index)">
				{{item.name}}
			</view>
		</view>

		<!-- 求职 -->
		<job-hunting v-if="categoryOn==5" :fullStatus="typesP[typeOn].name" :item="dataform"></job-hunting>
		<!-- 招工 -->
		<recruit-workers v-else-if="categoryOn==6" :fullStatus="typesP[typeOn].name" :item="dataform"></recruit-workers>

		<mer-service :statsus="typeOn" :types="typeOn" :typeList="categoryList[categoryType] ? categoryList[categoryType].children : []" :item="dataform" v-else></mer-service>
		<view class="uni-p-b-98">

		</view>
	</view>
</template>

<script>
	import notServiceProvider from '../components/notServiceProvider/notServiceProvider.vue';
	import merService from '../components/merService.vue';
	import recruitWorkers from '../components/recruitWorkers.vue';
	import jobHunting from '../components/jobHunting.vue';
	import {
		getTypeApi
	} from "@/api/api.js";
	export default {
		components: {
			notServiceProvider,
			merService,
			recruitWorkers,
			jobHunting
		},
		data() {
			return {
				dataform: {},
				showProvider: false,
				isWidth: 65,
				isLeft: 0,
				tabLeft: 0,
				types: [{
					name: '提供服务',
					type: 0
				}, {
					name: '找服务',
					type: 0
				}],
				typesP: [{
					name: '全职'
				}, {
					name: '兼职'
				}],
				typeOn: 0,
				categoryList: [],
				categoryType: 0,
				serviceCate: '', //服务类别
				serviceTitle: '', //标题
				servicePoint: '', //服务特色
				servicePrice: '', //服务价格
				serviceAddress: '', //服务地址
				contactList: [1, 2],
				supplementText: '', //补充详情
				maxLength: 200,
				categoryOn: 6
			};
		},

		onLoad(option) {
			this.categoryOn = Number(option.categoryOn);
			if (this.categoryOn == 6 || this.categoryOn == 5) {
				this.categoryType = this.categoryOn == 5 ? 0 : 1;
				uni.setNavigationBarTitle({
					title: title
				})
				this.categoryList = [{
					name: '求职',
					icon: '../static/images/navS_06.png',
				}, {
					name: '招工',
					icon: '../static/images/navS_07.png',
				}, ]
				let title = '发布-商家服务-' + this.categoryList[this.categoryType].name;
			} else {
				let title = '发布-商家服务'
				uni.setNavigationBarTitle({
					title: title
				})
				this.getTypeList()
			}
			this.dataform = option.item ? JSON.parse(option.item) : {};
			
		},
		methods: {
			//服务类别
			async getTypeList() {
				uni.showLoading({
					title: '加载中'
				})
				try {
					let res = await getTypeApi({
						limit: 9999
					});
					this.categoryList = res.data.list;
					if(this.categoryOn == 0 && this.dataform.typeId){
						this.categoryList.forEach((item,index)=>{
							item.children.forEach(child=>{
								if(child.id == this.dataform.typeId){
									this.categoryOn = index;
								}
							})
						})
					}
					uni.hideLoading();
				} catch (e) {
					//TODO handle the exception
				}
			},
			closeApplyProvider() {
				this.showProvider = false
			},

			typeNavClick(item, index) {
				this.typeOn = index
			},
			// 导航栏点击
			categoryNavClick(item, index) {
				console.log(item)
				// if (index == 5 || index == 6) {
				// 	let title = '发布-商家服务-' + item.name
				// 	uni.setNavigationBarTitle({
				// 		title: title
				// 	})
				// } else {
				// 	let title = '发布-商家服务'
				// 	uni.setNavigationBarTitle({
				// 		title: title
				// 	})
				// }
				if(this.dataform.id){
					return;
				}

				if (this.categoryList.length > 6) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryType = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				if([5,6].includes(this.categoryOn)) this.categoryOn = index == 0 ? 5 : 6; //设置导航点击了哪一个
			},
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.nav-bg {
		background: #ffffff;
		padding: 18rpx 30rpx 36rpx;

		// overflow-x: scroll;
		// white-space: normal!important;
		.item~.item {
			margin-left: 36rpx;
		}

		.item.item-mr-l {
			margin-left: 24rpx;
		}

		// .item:nth-child(5)~.item{
		// 	margin-left: 24rpx;
		// }
		.item {
			display: inline-block;
			white-space: nowrap;

			.img {
				margin: 0 auto;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: #ffffff;

				.image {
					width: 70rpx;
					height: 70rpx;
				}
				.image2 {
					width: 42rpx;
					height: 44rpx;
				}
			}

			.name {
				// width: 108rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
		}

		.item-on {
			.img {
				margin: 0 auto;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: #ffffff;
				background-color:rgba(239, 39, 50, .1);
				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.name {
				position: relative;
				color: rgba(239, 39, 50, 1);
				font-weight: 700;
				&::after{
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 50%;
					background-color:rgba(239, 39, 50, .2);
					border-radius: 10rpx;
				}
			}
		}
	}

	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}
</style>